<template>
	<div class="bottomBox">
		<section class="leftBox">
			<ul class="ulBox">
				<li>
					<category>
						<template #img> <img src="../../assets/images/物品.png" alt="" /></template>
						<template #category>煤炭制品</template>
						<template #num>
							<countTo :endVal="num1" class="num" :duration="4000" separator=","></countTo>
						</template>
					</category>
				</li>
				<li>
					<category>
						<template #img> <img src="../../assets/images/液体.png" alt="" /></template>
						<template #category>金属矿石</template>
						<template #num>
							<countTo :endVal="num1" class="num" :duration="4000" separator=","></countTo>
						</template>
					</category>
				</li>
				<li>
					<category>
						<template #img> <img src="../../assets/images/医疗服务.png" alt="" /></template>
						<template #category>矿建材料</template>
						<template #num>
							<countTo :endVal="num1" class="num" :duration="4000" separator=","></countTo>
						</template>
					</category>
				</li>
			</ul>
		</section>
		<section class="centerBox">
			<h2>截止于2024-01-26运输总数</h2>
			<h1><countTo :endVal="num2" class="num" :duration="4000" separator=","></countTo>单</h1>
		</section>
		<section class="rightBox">
			<ul class="ulBox">
				<li>
					<category>
						<template #img> <img src="../../assets/images/口红.png" alt="" /></template>
						<template #category>水泥</template>
						<template #num>
							<countTo :endVal="num1" class="num" :duration="4000" separator=","></countTo>
						</template>
					</category>
				</li>
				<li>
					<category>
						<template #img> <img src="../../assets/images/文件.png" alt="" /></template>
						<template #category>非金属矿石</template>
						<template #num>
							<countTo :endVal="num1" class="num" :duration="4000" separator=","></countTo>
						</template>
					</category>
				</li>
				<li>
					<category>
						<template #img> <img src="../../assets/images/其他.png" alt="" /></template>
						<template #category>其他物品</template>
						<template #num>
							<countTo :endVal="num1" class="num" :duration="4000" separator=","></countTo>
						</template>
					</category>
				</li>
			</ul>
		</section>
	</div>
</template>

<script>
	import countTo from 'vue-count-to';
	import category from './category.vue';
	export default {
		name: '',
		components: { category, countTo },
		props: ['list'],
		data() {
			return {
				number: 34482,
				num1: 99132,
				num2: 9999999999,
			};
		},
		computed: {},
		watch: {},
		created() {},
		mounted() {},
		methods: {},
	};
</script>
<style scoped>
	.bottomBox {
		display: flex;
		width: 100%;
		height: 100%;
		margin: 0 auto;

		.leftBox,
		.rightBox {
			flex: 2;
			display: flex;
			flex-direction: column-reverse;
			.ulBox {
				list-style: none;
				/* background-color: red; */
				width: 2.5rem;
			}
		}

		.centerBox {
			margin-bottom: 0.25rem;
			flex: 6;
			font-size: 0.5625rem;
			text-align: center;
			display: flex;
			flex-direction: column-reverse;
			h1 {
				letter-spacing: 0.125rem;
			}
			h2 {
				font-size: 0.1875rem;
			}
		}
	}
</style>
